<template>
    <section>

      <el-collapse>
        <el-collapse-item>
          <template slot="title">
            资源下载
          </template>
          <div>
            <el-button type="text" @click="getKeyTab">KeyTab下载</el-button>
          </div>
          <!--<el-tag type="primary" v-for="item in res.roles" style="margin-right: 5px;">{{item.role_name}}</el-tag>-->
        </el-collapse-item>
        <el-collapse-item title="租户信息">
          <el-table
              show-header:false
              :data="res.tenants"
              border
              style="width: 100%">
            <el-table-column
                label="名称">
              <template scope="scope">
                <span v-if="(scope.row.resources||'').length==0">{{scope.row.tenant_name}}</span>
                <!--<router-link v-if="(scope.row.resources||'').length>0"-->
                    <!--:to="{path: `/page42`,query: {param:{tenantArray: [{tenant_name:`${scope.row.tenant_name}`,tenant_id:`${scope.row.tenant_id}`,tenant_plugins: `${scope.row.resources}` }]}}}">-->
                  <!--{{scope.row.tenant_name}}-->
                <!--</router-link>-->


                <el-button v-if="(scope.row.resources||'').length>0" type="text" @click="gotopage42(scope.row)">{{scope.row.tenant_name}}</el-button>
              </template>
            </el-table-column>
            <el-table-column
                label="租户描述">
              <template scope="scope" class="tenant_desc">
               <span>{{scope.row.tenant_desc}}</span>
              </template>
            </el-table-column>
            <el-table-column
                    prop="resources"
                    label="配置">
              <template scope="scope" class="mytags">
                <el-tag v-if="scope.row.resources" type="primary"
                        v-for="item in (scope.row.resources||'').split(',')" style="margin-right: 5px;">
                  {{item}}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-collapse-item>
        <el-collapse-item title="堡垒机">
          <div>
            <!--<el-button style="float: right;" type="text" @click='towebssh'>连接WebSSH</el-button>-->
            <!--<a style="float: right;"  :href="websshPath" target="_blank">连接WebSSH</a>-->
            <el-table
                show-header:false
                :data="mmachines"
                style="width: 100%">
              <el-table-column
                  prop="ip"
                  label="IP">
              </el-table-column>
              <el-table-column
                  prop="port"
                  label="端口">
              </el-table-column>
              <el-table-column
                  label="操作">
                <template scope="scope">
                  <el-button type="text" @click='towebssh(scope)'>连接WebSSH</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-collapse-item>
        <el-collapse-item title="24小时任务统计">
          <div>
            <el-table
                :data="user_task_infos"
                style="width: 100%">
              <el-table-column
                  label="运行中任务/总任务">
                <template scope="scope">
                  {{scope.row.running}}/{{scope.row.counts}}
                </template>
              </el-table-column>
              <el-table-column
                  label="成功任务/总任务">
                <template scope="scope">
                  {{scope.row.success}}/{{scope.row.counts}}
                </template>
              </el-table-column>
              <el-table-column
                  label="失败任务/总任务">
                <template scope="scope">
                  {{scope.row.fail}}/{{scope.row.counts}}
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-collapse-item>
        <el-collapse-item title="hdfs连接信息">
          <div>
            <el-table
                :data="res.hdfs_info"
                style="width: 100%">
              <el-table-column
                  label="名称">
                <template scope="scope">
                  {{scope.row.sys_conf_key}}
                </template>
              </el-table-column>
              <el-table-column
                  label="值">
                <template scope="scope">
                  {{scope.row.sys_conf_value}}
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-collapse-item>
        <el-collapse-item title="hbase连接信息">
          <div>
            <el-table
                :data="res.hbase_info"
                style="width: 100%">
              <el-table-column
                  label="名称">
                <template scope="scope">
                  {{scope.row.sys_conf_key}}
                </template>
              </el-table-column>
              <el-table-column
                  label="值">
                <template scope="scope">
                  {{scope.row.sys_conf_value}}
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-collapse-item>
        <el-collapse-item title="hive连接信息">
          <div>
            <el-table
                :data="res.hive_info"
                style="width: 100%">
              <el-table-column
                  label="名称">
                <template scope="scope">
                  {{scope.row.sys_conf_key}}
                </template>
              </el-table-column>
              <el-table-column
                  label="值">
                <template scope="scope">
                  {{scope.row.sys_conf_value}}
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-collapse-item>
        <el-collapse-item title="kafka连接信息">
          <div>
            <el-table
                :data="res.kafka_info"
                style="width: 100%">
              <el-table-column
                  label="名称">
                <template scope="scope">
                  {{scope.row.sys_conf_key}}
                </template>
              </el-table-column>
              <el-table-column
                  label="值">
                <template scope="scope">
                  {{scope.row.sys_conf_value}}
                </template>
              </el-table-column>

            </el-table>
          </div>
        </el-collapse-item>
        <el-collapse-item title="phoenix连接信息">
          <div>
            <el-table
                :data="res.phoenix_info"
                style="width: 100%">
              <el-table-column
                  label="名称">
                <template scope="scope">
                  {{scope.row.sys_conf_key}}
                </template>
              </el-table-column>
              <el-table-column
                  label="值">
                <template scope="scope">
                  {{scope.row.sys_conf_value}}
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-collapse-item>
        <el-collapse-item title="kerberos信息">
          <div>
            <el-table
                :data="res.kerberos_info"
                style="width: 100%">
              <el-table-column
                  label="名称">
                <template scope="scope">
                  {{scope.row.sys_conf_key}}
                </template>
              </el-table-column>
              <el-table-column
                  label="值">
                <template scope="scope">
                  {{scope.row.sys_conf_value}}
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-collapse-item>
      </el-collapse>
    </section>
</template>

<script>
  import util from '../../common/util'
  import dao from '../../common/dao'
  import C from '../../common/cfg'

  export default {

    data() {
      return {
        keyTabl: '',
        websshPath:'',
        res: {
          "retCode": "",
          "retMsg": "",
          "user_id": 1,
          "email": "",
          "phone": "",
          "user_desc": "",
          "roles": [],
          "tenants": [],
          "mmachine": {},
          "webssh": {},
          "user_task_info": {},
          "hdfs_info": [],
          "hbase_info": [],
          "hive_info": [],
          "kafka_info": [],
          "yarn_info": [],
          kerberos_info: [],
          phoenix_info: [],
        },
        mmachines: [],
        user_task_infos: [],
        connectionInfos: [
          {
            name: "hdfs",
            data: []
          }, {
            name: "hbase",
            data: []
          }, {
            name: "hive",
            data: []
          }, {
            name: "kafka",
            data: []
          }, {
            name: "yarn",
            data: []
          },
        ],

      }
    },
    methods: {
      towebssh (scope) {
        let ip = scope.row.ip||''
        let port = scope.row.port||''
        let open = window.open
        dao.webshellShell({ip}).then(res=>{
          if(res.FX.err) return
         // this.websshPath =res.body.currentPath
          open(res.body.currentPath);
        })
        //window.open("http://192.168.119.113:4200/?u=/SwOZddaDAYxaP8sTEJsyA==&p=/SwOZddaDAYxaP8sTEJsyA==");
        //window.open(`${C.APIURL}bdpmng/webssh.html`);
      },
      //获取数据方法
      testHttp () {
        dao.getUserInfo({}).then((res) => {
          // success callback
          if (!res.body || res.body.retCode != 200) {
            util.apiMsg(res);
            return false
          }
          this.res = res.body;
          if(this.res.mmachine) this.mmachines = [this.res.mmachine];
          if (this.res.user_task_info) this.user_task_infos = [this.res.user_task_info];
          if (this.res.hdfs_info) this.connectionInfos[0].data = [this.res.hdfs_info];
          if (this.res.hbase_info) this.connectionInfos[1].data = [this.res.hbase_info];
          if (this.res.hive_info) this.connectionInfos[2].data = [this.res.hive_info];
          if (this.res.kafka_info) this.connectionInfos[3].data = [this.res.kafka_info];
          if (this.res.yarn_info) this.connectionInfos[4].data = [this.res.yarn_info];
          //this.$router.replace('/login');
        }).catch(res => {
          this.$message({
            type: 'warning',
            meaaage: '获取用户详情有误'
          })
          this.$router.replace('/login');
        })
      },
      getKeyTab () {

        this.$confirm('确定要下载Key Tab文件吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          dao.genKeyTab();
        }).catch(() => { });

      },
      gotopage42 (row) { //获取选中的租户信息
        let tenantArray = [];
        let tenant_plugins = row.resources;
        let tenantObj = {
          tenant_id: row.tenant_id,
          tenant_name: row.tenant_name,
          tenant_plugins: tenant_plugins
        }
        tenantArray.push(tenantObj);
        if (tenantArray.length === 0) {
          this.$message({
            message: '请至少选择一条记录！',
            type: 'warning'
          });
        } else {
          util.save('page42_tenantArray',tenantArray);
          util.save('page42_butShow', false);
          this.$router.push({
            path: `/page42`,
          });
        }
      },
    },
    mounted () {
      this.testHttp()
      //this.towebssh()
    }
  }
</script>
<style scoped>
    table {
        text-align: center;
    }

    table th, table td {
        text-align: center;
    }

    .box-card {
        margin-bottom: 10px;
    }
</style>